<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeVal"
      @search="onSearch"
      @input="onInput"
      @cancel="onCancel"
    />
    <!-- 3个组件历史热门，搜索列表，产品裂变 -->
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @onSearch="onSearch"
    ></HistoryHot>
    <SearchTipsList
      v-else-if="blockShow == 2"
      :SearchTipsListData="SearchTipsListData"
      @onSearch="onSearch"
    ></SearchTipsList>
    <SearchProducts
      v-else-if="blockShow == 3"
      :SearchGoodListData="SearchGoodListData"
      :filterCategory="filterCategory"
      @changeCategoty="changeCategoty"
      @changePrice="changePrice"
    >
    </SearchProducts>
  </div>
</template>

<script>
import HistoryHot from "@/components/HistoryHot.vue";
import SearchTipsList from "@/components/SearchTipsList.vue";
import SearchProducts from "@/components/SearchProducts.vue";
import { GetSearchPopupTop } from "@/request/api";
import { GetSearchTipListData } from "@/request/api";
import { GetGoodListData } from "@/request/api";
export default {
  data() {
    return {
      //搜索框v-model
      searchVal: "",
      //placeholder的值
      placeVal: "想买什么买什么",
      //blockShow来决定最终展示的是哪一个组件
      //blockShow1就是 展示；历史热门
      //blockShow2就是 搜索列表
      //blockShow3就是 展示；产品裂变
      blockShow: 1,
      //历史记录数据裂表
      historyKeywordList: [],
      //热门数据裂表
      hotKeywordList: [],
      //搜索提示列表数组
      SearchTipsListData: [],
      //渲染页面
      SearchGoodListData: [],
      //下拉菜单
      filterCategory: [],
      //  order  排序
      //排序从高到低 从低到高 排序的方式
      order: "desc",
      sort: "id",
      categoryId: "0",
    };
  },
  created() {
    //发起请求

    GetSearchPopupTop().then((res) => {
      this.placeVal = res.data.defaultKeyword.keyword;
      console.log(res.data);
      this.historyKeywordList = res.data.historyKeywordList;
      this.hotKeywordList = res.data.hotKeywordList;
    });
  },
  methods: {
    //子传父中 分类 传过来的 categoryId 分类的Id 子组件SearchProducts 传过来的 categoryId 的值 把父组件中的categoryId修改 就获取到了当前点击的categoryId值 拿到这个categoryId在发请求 根据这个Id的值去渲染页面
    changeCategoty(val) {
      this.categoryId = val;
      //  拿到这个categoryId在发请求 发送请求携带关键字 重新渲染这个页面 选中的值对应该渲染的页面
      this.onSearch(this.searchVal);
    },
    changePrice(val) {
      //val 的值 desc 由高到低 asc 由低到高

      //排序方式
      this.order = val;

      //以什么来排序 价格 price
      this.sort = "price";
      //重新渲染 带入 order  sort 的新传入的值
      this.onSearch(this.searchVal);
    },
    onInput(val) {
      //发送输入的请求搜索后台列表数组赋值给搜索提示数组 在父传子把这个数组带给SearchTipsList页面
      //用户边输入的要切换页面进入 blockShow = 2 第二个
      this.blockShow = 2;
      GetSearchTipListData({ keyword: val }).then((res) => {
        console.log(res.data);
        this.SearchTipsListData = res.data;
      });
    },
    onSearch(val) {
      //val就是用户输入的信息
      //onSearch用户按回车进行搜索时候执行
      this.blockShow = 3;

      GetGoodListData({
        //用户搜索关键字
        keyword: val,
        //排序从高到低 从低到高 排序的方式
        order: this.order,
        //以什么来排序
        sort: this.sort,
        //分类id
        categoryId: this.categoryId,
      }).then((res) => {
        //
        this.searchVal = val;

        console.log(res.data.goodsList);
        this.SearchGoodListData = res.data.goodsList;
        //需求吧里面的name改成text ,键名id改value 下拉菜单的值先修改
        let newArr = JSON.parse(
          JSON.stringify(res.data.filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        this.filterCategory = newArr;
      });
    },
    onCancel() {
      //用户带年纪取消按钮执行
      // console.log(11122211);
      //跳转到/home路径
      //从哪个路径进来就回到那个路径
      this.$router.go(-1);
    },
  },
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProducts,
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  z-index: 999999;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #efefef;
  overflow: scroll;
  font-size: 0.16rem;
  top: 0;
}
</style>